<template>
  <el-dialog
    v-model="visible"
    :title="props.dialogTitle"
    :close-on-click-modal="false"
    draggable
    width="600px"
  >
    <el-form
      :model="form"
      ref="formRef"
      :rules="rules"
      :inline="true"
      label-position="left"
      label-width="auto"
    >
      <el-form-item label="城市标签" prop="cityName">
        <el-select :disabled="editDisabled" v-model="form.cityName" placeholder="请选择">
          <el-option v-for="item in cityNameOptions" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="区域名称:" prop="areaId">
        <ApiSelect
          v-model="form.areaId"
          :api="selectState.areaList.api"
          :params="{ pageNum: 1, pageSize: 999999, cityName: form.cityName }"
          :resultField="selectState.areaList.resultField"
          :valueField="selectState.areaList.valueField"
          :labelField="selectState.areaList.labelField"
          :immediate="true"
          @change="change"
        />
      </el-form-item>
      <el-form-item label="点位名称:" prop="positionId">
        <el-select v-model="form.positionId" placeholder="请选择">
          <el-option
            v-for="item in optionsPosition"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="上传点位图片:" prop="positionImg">
        <ImageUploadByType
          v-model="form.positionImg"
          :isShowTip="false"
          uploadType="1"
          :limit="1"
          :fileSize="10"
          :validateAspectRatio3To2="true"
        />
        <div> 请上传3:2的比例并且大小不超过 10MB 格式为 png/jpg/jpeg 的文件 </div>
      </el-form-item>
      <el-form-item label="备注：" prop="remarks">
        <el-input
          v-model="form.remarks"
          style="width: 200px"
          clearable
          maxlength="20"
          placeholder="请输入"
        />
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: flex-end">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="confirm">提交</el-button>
    </div>
  </el-dialog>
</template>
<script setup>
import { postAddLotteryApi, putEditLotteryApi } from '@/api/lottery'
import { useOrganApiConfig } from '@/hooks/service'
import useGlobalStore from '@/store/modules/global'

const globalStore = useGlobalStore()
const cityNameOptions = computed(() => globalStore.myCityList)
const selectState = useOrganApiConfig()
const props = defineProps({
  dialogTitle: {
    type: String
  }
})
const editDisabled = computed(() => props.dialogTitle === '编辑')

const visible = ref(false)
const form = ref({
  areaId: null,
  positionId: null,
  positionImg: null,
  remarks: null,
  status: null,
  cityName: null
})

const rules = ref({
  cityName: [{ required: true, message: '请选择城市', trigger: 'blur' }],
  areaId: [{ required: true, message: '请选择区域', trigger: 'blur' }],
  positionId: [{ required: true, message: '请选择点位', trigger: 'blur' }],
  positionImg: [{ required: true, message: '请上传点位图片', trigger: 'blur' }]
})
const formRef = ref()
const immediate = computed(() => props.dialogTitle === '编辑')

function confirm() {
  formRef.value.validate((valid) => {
    if (valid) {
      // console.log('调用接口')
      form.value.status ? form.value.status : (form.value.status = 0)
      form.value.positionImg = form.value.positionImg[0]?.url
        ? form.value.positionImg[0]?.url
        : form.value.positionImg
      if (immediate.value) {
        putEditLotteryApi(form.value)
          .then(() => {
            visible.value = false
            emits('refresh')
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        form.value.positionImg = form.value.positionImg[0]?.url
          ? form.value.positionImg[0]?.url
          : form.value.positionImg
        postAddLotteryApi(form.value)
          .then(() => {
            visible.value = false
            emits('refresh')
          })
          .catch((err) => {
            console.log(err)
          })
      }
      console.log(form.value)
    }
  })
}
function change() {
  optionsPosition.value = []
  form.value.positionId = null
  getFindPositionDraw(false)
}
const optionsPosition = ref()

import { getFindPositionDrawApi } from '@/api/lottery'

function getFindPositionDraw(type = true) {
  const params = {
    positionId: type ? form.value.positionId : null,
    areaId: form.value.areaId
  }
  getFindPositionDrawApi(params).then((res) => {
    optionsPosition.value = res.data?.map((item) => {
      return {
        label: item.positionName,
        value: item.positionId
      }
    })
  })
}

function init(item, cityName) {
  if (item) {
    form.value = item
    getFindPositionDraw()
    console.log({ item })
  } else {
    form.value.cityName = cityName
  }
  visible.value = true
}
watch(
  () => visible.value,
  (newVal) => {
    if (!newVal) {
      form.value = {}
      optionsPosition.value = []
    }
  }
)
const emits = defineEmits(['refresh'])
defineExpose({
  init
})
</script>
<style lang="scss" scoped></style>
